import {
  Button,
  Input,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  Flex,
  useDisclosure,
  Box,
  useMediaQuery,
} from '@chakra-ui/react';
import React, { useState } from 'react';
import useCreateUser from '../hooks/useCreateUser';

export default function NickModal(): JSX.Element {
  const [isLargerThanPhone] = useMediaQuery('(min-width: 800px)');

  const { setNameHandler } = useCreateUser();
  const { isOpen, onOpen, onClose } = useDisclosure();
  const [nickname, setNickname] = useState('');

  const handleOkClick = (): void => {
    setNameHandler(nickname);
    onClose();
  };

  return (
    <>
      <Button
        onClick={onOpen}
        backgroundColor="#FFD700"
        border="2px solid black"
        position="absolute"
        bottom="290px"
        left={isLargerThanPhone ? '100px' : '50px'}
        borderRadius="2rem"
        width={isLargerThanPhone ? '250px' : '150px'}
        height="70px"
        fontSize={isLargerThanPhone ? '40px' : '25px'}
      >
        Начать игру
      </Button>
      <Box as="form">
        <Modal isOpen={isOpen} onClose={onClose} size="xl">
          <ModalOverlay />
          <ModalContent maxW="40rem" padding="4">
            <ModalHeader
              fontSize="2xl"
              textAlign="center"
              style={{
                fontSize: '30px',
              }}
            >
              Введите никнейм
            </ModalHeader>{' '}
            {/* Текст заголовка по центру */}
            <ModalCloseButton />
            <ModalBody>
              <Input
                style={{
                  fontSize: '40px',
                }}
                name="name"
                placeholder="Никнейм"
                value={nickname}
                onChange={(e) => setNickname(e.target.value)}
                size="lg"
              />
            </ModalBody>
            <ModalFooter>
              <Flex justifyContent="center" width="100%">
                <Button
                  colorScheme="yellow"
                  onClick={handleOkClick}
                  size="lg"
                  style={{
                    border: '2px solid black',
                    fontSize: '30px',
                  }}
                >
                  Присоединиться
                </Button>
              </Flex>
            </ModalFooter>
          </ModalContent>
        </Modal>
      </Box>
    </>
  );
}
